<template>
  <div>
    <div class="button-wrapper">
      <el-button type="myBlue" @click="addExpert">新增专家</el-button>
      <el-button type="myBlue" @click="notShowSelected">隐藏选中</el-button>
      <el-button type="myBlue" @click="showSelected">展示选中</el-button>
      <el-button type="success" @click="refresh">刷新</el-button>
    </div>
    <el-table class="admin-info-table"
              height="300"
              :data="tableData"
              stripe
              @selection-change="handleSelectionChange"
              style="width: 100%;">
      <el-table-column width="55" type="selection"/>
      <el-table-column align="center" width="120" label="姓名" prop="expertName"/>
      <el-table-column align="center" width="100" label="图片">
        <template slot-scope="scope">
          <div class="photo">
            <img :src="'/api/img/expert/' + scope.row.expertId + '.png'">
          </div>
        </template>
      </el-table-column>
      <el-table-column align="center" width="120" label="类别" prop="domain.domainName">
        <template slot-scope="scope">
            <span v-if="scope.row.categories.length">
              <span v-for="(category,index) in scope.row.categories" :key="category.categoryId">
                <span v-if="index!==scope.row.categories.length-1" :title="category.categoryName"
                      v-text="category.categoryName+'、'"/>
                <span v-else :title="category.categoryName" v-text="category.categoryName"/>
              </span>
            </span>
          <span v-else>-</span>
        </template>
      </el-table-column>
      <el-table-column align="center" width="120" label="领域" prop="domain.domainName"/>
      <el-table-column align="center" label="方向">
        <template slot-scope="scope">
          <span v-if="scope.row.directions.length">
            <span v-for="(direction,index) in scope.row.directions" :key="direction.directionId">
              <span v-if="index!==scope.row.directions.length-1" :title="direction.directionName"
                    v-text="direction.directionName+'、'"/>
              <span v-else :title="direction.directionName" v-text="direction.directionName"/>
            </span>
          </span>
          <span v-else>-</span>
        </template>
      </el-table-column>
      <el-table-column align="center" width="120" label="职称" prop="title"/>
      <el-table-column align="center" width="120" label="收藏量" prop="favorsNum"/>
      <el-table-column align="center" width="120" label="浏览量" prop="visitsNum"/>
      <el-table-column align="center" label="是否展示">
        <template slot-scope="scope">
          <el-switch v-model="scope.row.display" active-text="展示" inactive-text="隐藏"
                     @change="toggleShowExpert(scope.row)"/>
        </template>
      </el-table-column>

      <el-table-column align="center" width="260">
        <template slot="header" slot-scope="scope">
          <el-input v-model="searchContent" size="mini" placeholder="输入关键字搜索" @input="change(scope.$index, scope.row)"/>
        </template>
        <template slot-scope="scope">
          <el-button @click="handleLook(scope.row)">查看</el-button>
          <el-button type="myBlue" @click="handleEdit(scope.$index, scope.row)">修改</el-button>
          <el-button type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination-wrapper">
      <el-pagination
          :current-page="form.pageIndex + 1"
          :page-size="form.pageSize"
          :page-sizes="[5, 10, 20, 50, 100, 500]"
          :total="total"
          background
          layout="prev, pager, next, sizes, total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: "ExpertInfoManage",
  data() {
    return {
      tableData: [
        {
          birthYear: 0,
          categories: [{categoryId: 0, categoryName: "", count: 0}],
          city: "",
          concurrentPost: "",
          country: "",
          currentPost: "",
          directions: [{directionId: 0, directionName: "", count: 0}],
          domain: {domainId: 0, domainName: "", count: 0},
          educational: [""],
          email: "",
          expertId: 0,
          expertName: "专家名字",
          favorite: !1,
          favorsNum: 0,
          gender: "",
          hidden: !1,
          honor: "",
          internalMeeting: [
            {name: "指挥部内部会议", remarks: "", url: ""},
          ],
          otherHonor: "",
          otherMeeting: [{name: "其他评审会", remarks: "", url: ""}],
          papers: "",
          preselect: !1,
          projectExperience: "",
          province: "",
          qualification: "",
          telephone: "",
          title: "",
          visitsNum: 0,
          website: "",
          workExperience: [""],
        },
      ],
      total: 0,
      form: {
        categoryId: -1,
        directionId: [],
        domainId: -1,
        keyWord: "",
        pageIndex: 0,
        pageSize: 10,
        showHidden: !0,
      },
      searchContent: "",
      multipleSelection: [],
    };
  },
  methods: {
    handleSelectionChange(t) {
      this.multipleSelection = t;
    },
    addExpert() {
      var t = "./#/Expert/Info?editMode=new&id=-1";
      window.open(t, "_blank");
    },
    importExpert() {
    },
    showSelected() {
      for (const item of this.multipleSelection) {
        const payload = {expertId: item.expertId, hidden: false};
        this.$http.post("api/expert/setHidden", payload).then(res => {
          if (200 === res.data.code) {
            item.hidden = false
            item.display = true
          }
        });
      }
    },
    notShowSelected() {
      for (const item of this.multipleSelection) {
        const payload = {expertId: item.expertId, hidden: true};
        this.$http.post("api/expert/setHidden", payload).then(res => {
          if (200 === res.data.code) {
            item.hidden = true
            item.display = false
          }
        });
      }
    },
    toggleShowExpert(item) {
      const payload = {expertId: item.expertId, hidden: !item.display};
      this.$http.post("api/team/setHidden", payload).then(res => {
        if (200 === res.data.code) {
          item.hidden = !item.hidden
        }
      })
    },
    change() {
      (this.form.keyWord = this.searchContent),
          (this.form.pageIndex = 0),
          this.search();
    },
    handleLook(t) {
      var e = "./#/Expert/Info?id=" + t.expertId;
      window.open(e, "_blank");
    },
    handleEdit(t, e) {
      var a = "./#/Expert/Info?editMode=edit&id=" + e.expertId;
      window.open(a, "_blank");
    },
    handleDelete(t, e) {
      var a = this;
      this.$confirm(
          "此操作将永久删除该专家（" + e.expertName + "）, 是否继续?",
          "提示",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }
      )
          .then(function () {
            a.$http
                .get("api/expert/delete?expertId=" + e.expertId)
                .then(function (t) {
                  200 === t.data.code &&
                  (a.search(),
                      a.$message({type: "success", message: "删除成功!"}));
                });
          })
          .catch(function () {
            a.$message({type: "info", message: "已取消删除"});
          });
    },
    handleSizeChange(t) {
      (this.form.pageSize = t), this.search();
    },
    handleCurrentChange(t) {
      (this.form.pageIndex = t - 1), this.search();
    },
    search() {
      var t = this;
      this.$http
          .post("/api/expert/search", this.form)
          .then(function (e) {
            200 === e.data.code &&
            ((t.tableData = e.data.data), (t.total = e.data.total));
          });
    },
    refresh() {
      (this.form = {
        categoryId: -1,
        directionId: [],
        domainId: -1,
        keyWord: "",
        pageIndex: 0,
        pageSize: 10,
        showHidden: !0,
      }),
          (this.searchContent = ""),
          this.search();
    },
  },
  created() {
    this.search();
  },
}
</script>

<style scoped>
.button-wrapper {
  margin: 15px;
}

.photo {
  width: 64px;
  height: 64px;
  background-color: #eee;
  position: relative;
  margin: 10px;
}

.photo img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
}

.pagination-wrapper {
  float: right;
  padding-top: 4px;
}
</style>
